<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <div class="box" ref="box">{{message}}</div>
        <div ref="box2">333</div>
        <button @click="changemessage">点击我修改message</button>
        <com-a @changemessage="changemessage"></com-a>
    </div>
    <template id="coma">
        <div>
            <h1>我是coma组件{{message}}</h1>
            <button @click="changem">点击</button>
        </div>
       
    </template>
    <script>
        // 生命周期：
        // 一、初始化加载 二、更新 三、销毁
        // 8个生命周期 

        /* 
            beforeCreate()
            初始化阶段，应用不多

            created()
            在实例创建完成后被立即调用，该阶段完成了对 data 中的数据的 observer，该阶段可以处理一些异步任务

            挂载阶段
            beforeMount()
            在挂载开始之前被调用，应用不多

            mounted()
            该阶段执行完了模板解析，以及挂载。同时组件根组件元素被赋给了 $el 属性，该阶段可以通过 DOM 操作来对组件内部元素进行处理了

            更新阶段
            beforeUpdate()
            数据更新时调用，但是还没有对视图进行重新渲染，这个时候，可以获取视图更新之前的状态

            updated()
            由于数据的变更导致的视图重新渲染，可以通过 DOM 操作来获取视图的最新状态

            卸载阶段
            beforeDestroy()
            实例销毁之前调用，移除一些不必要的冗余数据，比如定时器

            destroyed()
            Vue 实例销毁后调用


            activated();keep-alive组件激活的时候触发的生命周期
            
            deactivated();keep-alive组件停用的时候触发的生命周期
        */
        /* 
         created()
         mounted()
         beforeDestroy() : 需要销毁和实例有关的操作
        */

        /* 
            el data render template computed methods watch render mount components beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed props 
        
        */


        // 组件嵌套的生命周期执行顺序 ,先执行内层 在执行外层生命周期 ，像洋葱模型
        let ComA = {
            template: "#coma",
            data:function(){
                return {
                    message:"子组件数据"
                }
            },
            methods:{
                changem(){
                    this.message = "子组件修改了";
                    this.$emit("changemessage",this.message)
                }
            },
            beforeCreate() {
                console.log("beforeCreate子组件")
            },
            created() {
                console.log("created子组件")
            },
            beforeMount() {
                console.log("beforeMount子组件");
            },
            mounted() {
                // 真实dom结构渲染完毕
                console.log("mounted子组件")
                // console.log( this.$refs.box);
            },
            beforeUpdate() {
                console.log("beforeUpdate子组件");
                // console.log(this.$refs.box.innerHTML);
            },
            updated() {
                console.log("updated子组件")
                // console.log(this.$refs.box.innerHTML);
            },
            beforeDestroy() {
                console.log("beforeDestroy子组件");
                clearTimeout(this.timer);
            },
            destroyed() {
                console.log("destroyed子组件")
            }
        }



        let vm = new Vue({
            el: "#app",
            data: {
                message: "数据",
                timer: 0
            },
            components:{
                ComA
            },
            methods: {
                changemessage(arg) {
                    this.message = arg;
                }
            },
            beforeCreate() {
                console.log("beforeCreate")
            },
            created() {
                // ajax请求
                console.log("created")
                //   this.timer =   setTimeout(() => {
                //         console.log("setTimeout")
                //         this.message = "4444";
                //     }, 3000);
                // console.log(document.querySelector(".box"))
                // console.log( this.$refs.box);
            },
            beforeMount() {
                console.log("beforeMount");
            },
            mounted() {
                // 真实dom结构渲染完毕
                console.log("mounted")
                // console.log( this.$refs.box);
            },
            beforeUpdate() {
                console.log("beforeUpdate");
                // console.log(this.$refs.box.innerHTML);
            },
            updated() {
                console.log("updated")
                // console.log(this.$refs.box.innerHTML);
            },
            beforeDestroy() {
                console.log("beforeDestroy");
                // clearTimeout(this.timer);
            },
            destroyed() {
                console.log("destroyed")
            }
        })

    //    vm.$destroy();


    </script>
</body>

</html>